<template>
    <div class="code">
        <div class="itemAdd" @click="add">
            <Plus color="#3A9AD3" size="16" />添加桌号
        </div>
        <div class="list">
            <div class="item" v-for="item in list" :key="item.id">
                <div>桌号：{{ item.tableNo }}</div>
                <div><img src="https://cxj.szzkba.cn/upload/i/2024/06/03/155757.png" alt=""></div>
                <div class="flex"><span @click="check(item.tableUrl)">查看</span><span
                        @click="download(item.tableUrl)">下载</span><span @click="del(item.id)">删除</span>
                </div>
            </div>
        </div>
        <nut-popup position="bottom" :style="{ width: '100%', height: '30%' }" v-model:visible="showRight">
            <nut-form>
                <nut-form-item label="桌号：">
                    <nut-input v-model="code" placeholder="请输入桌号" />
                </nut-form-item>
                <nut-form-item label="备注：">
                    <nut-input v-model="remark" placeholder="请输入备注" />
                </nut-form-item>
            </nut-form>
            <div class="btns">
                <nut-button type="default" size="small" style="margin-right: 10rpx;" @click="calce">取消</nut-button>
                <nut-button type="info" size="small" @click="submit">提交</nut-button>
            </div>
        </nut-popup>
        <nut-popup :style="{ padding: '30px 50px' }" v-model:visible="showCode">
            <img :src="url" alt="" style="width: 300rpx;height: 300rpx;"></nut-popup>
    </div>
</template>

<script lang="ts">
import Taro, { useRouter, useReachBottom, useShareAppMessage } from '@tarojs/taro';
import { Plus } from '@nutui/icons-vue-taro';
import { reactive, toRefs, onMounted } from 'vue';
import { getCodeList, addCode, delCode } from '../../../../api/index'
export default {
    components: {
        Plus
    },
    setup() {

        const data = reactive({
            showRight: false,
            openId: '',
            code: '',
            remark: '',
            list: [],
            showCode: false,
            url: '',
        });
        onMounted(() => {
            Taro.getStorage({
                key: 'user',
                success: function (res) {
                    if (res.data.openId) {
                        data.openId = res.data.openId
                        getList()
                    }
                }
            })
        });
        const getList = () => {
            getCodeList({ storeNo: data.openId }).then(res => {
                if (res.code == 200) {
                    data.list = res.rows
                }
            })
        }
        const add = () => {
            data.code = ''
            data.remark = ''
            data.showRight = true
        }
        const submit = () => {
            if (data.code) {
                addCode(
                    {
                        storeNo: data.openId,
                        tableNo: data.code,
                        remark: data.remark,
                    }
                ).then(res => {
                    if (res.code == 200) {
                        Taro.showToast({
                            title: '提交成功',
                            icon: 'success',
                            duration: 2000
                        })
                        data.showRight = false
                        getList()
                    } else if (res.code == 500) {
                        Taro.showToast({
                            title: '重复添加',
                            icon: 'error',
                            duration: 2000
                        })
                    }
                })
            } else {
                Taro.showToast({
                    title: '请填写桌号',
                    icon: 'error',
                    duration: 2000
                })
            }
        }
        const calce = () => {
            data.showRight = false
        }
        const del = (id) => {
            delCode(id).then(res => {
                if (res.code == 200) {
                    Taro.showToast({
                        title: '删除成功',
                        icon: 'success',
                        duration: 2000
                    })
                    getList()
                }
            })
        }
        const download = (url) => {
            Taro.downloadFile({
                url: url,
                success: function (res) {
                    if (res.statusCode === 200) {
                        Taro.saveImageToPhotosAlbum({
                            filePath: res.tempFilePath,
                            success: function (res) {
                                Taro.showToast({
                                    title: '已保存到相册',
                                    icon: 'success',
                                    duration: 2000
                                })
                            }
                        })
                    }
                }
            })
        }
        const check = (url) => {
            data.url = url
            data.showCode = true
        }
        return {
            ...toRefs(data), add, submit, calce, getList, del, download, check
        }
    }
};
</script>


<style lang="scss">
.code {
    .itemAdd {
        display: inline-flex;
        align-items: center;
        padding: 12rpx 16rpx;
        border: 1rpx solid #ccc;
        border-radius: 12rpx;
        font-size: 24rpx;
        margin: 20rpx 0 0 20rpx;
    }

    .list {
        border-top: 1rpx solid #ccc;
        border-left: 1rpx solid #ccc;
        margin-top: 30px;

        .item {
            box-sizing: border-box;
            display: inline-block;
            width: 33.33%;
            border-right: 1rpx solid #ccc;
            border-bottom: 1rpx solid #ccc;
            text-align: center;
            padding: 20rpx 0;

            img {
                width: 60rpx;
                height: 60rpx;
            }

            .flex {
                margin-top: 20rpx;
                justify-content: center;
                font-size: 24rpx;

                span:nth-child(2) {
                    margin: 0 20rpx;
                }
            }
        }
    }

    .nut-cell {
        padding: var(--nut-cell-padding, 26rpx 32rpx 26rpx 100rpx);
    }

    .btns {
        display: flex;
        justify-content: center;
    }
}
</style>